<template>
	<view class="container">
		<view class="form-container">
			<view class="form-group">
				<view class="form-label">原密码</view>
				<input type="password" class="form-input" v-model="oldPassword" placeholder="请输入原密码"/>
			</view>
			
			<view class="form-group">
				<view class="form-label">新密码</view>
				<input type="password" class="form-input" v-model="newPassword" placeholder="请输入新密码"/>
				<view class="form-tips">密码长度为8-20位，包含字母和数字</view>
			</view>
			
			<view class="form-group">
				<view class="form-label">确认密码</view>
				<input type="password" class="form-input" v-model="confirmPassword" placeholder="请再次输入新密码"/>
			</view>
			
			<view class="form-error" v-if="errorMessage">{{ errorMessage }}</view>
			
			<button class="submit-btn" @click="changePassword">确认修改</button>
			
			<view class="forget-password-link" @click="goToForgetPassword">
				<text>忘记原密码？使用验证码重置</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldPassword: '',
				newPassword: '',
				confirmPassword: '',
				errorMessage: ''
			}
		},
		methods: {
			// 验证密码
			validatePassword() {
				// 清除错误信息
				this.errorMessage = '';
				
				// 验证原密码是否为空
				if (!this.oldPassword) {
					this.errorMessage = '请输入原密码';
					return false;
				}
				
				// 验证新密码是否为空
				if (!this.newPassword) {
					this.errorMessage = '请输入新密码';
					return false;
				}
				
				// 验证新密码格式
				const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/;
				if (!passwordRegex.test(this.newPassword)) {
					this.errorMessage = '密码必须为8-20位，包含字母和数字';
					return false;
				}
				
				// 验证确认密码是否为空
				if (!this.confirmPassword) {
					this.errorMessage = '请再次输入新密码';
					return false;
				}
				
				// 验证两次密码是否一致
				if (this.newPassword !== this.confirmPassword) {
					this.errorMessage = '两次输入的密码不一致';
					return false;
				}
				
				return true;
			},
			
			// 修改密码
			changePassword() {
				// 验证密码
				if (!this.validatePassword()) {
					return;
				}
				
				// 显示加载中
				uni.showLoading({
					title: '提交中...'
				});
				
				// 获取用户信息和token
				const userInfo = uni.getStorageSync('userInfo');
				const token = uni.getStorageSync('uni_id_token') || uni.getStorageSync('token') || '';
				
				// 调用云对象修改密码
				(async () => {
					try {
						const userService = uniCloud.importObject('user-service');
						const res = await userService.changePassword({
						oldPassword: this.oldPassword,
						newPassword: this.newPassword,
						userInfo: userInfo ? JSON.parse(userInfo) : {},
						token: token // 添加token
						});
						
						uni.hideLoading();
						
						if (res.code === 0) {
							// 修改成功
							uni.showToast({
								title: '密码修改成功',
								icon: 'success'
							});
							
							// 清空表单
							this.oldPassword = '';
							this.newPassword = '';
							this.confirmPassword = '';
							
							// 延迟返回上一页
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						} else {
							// 修改失败
							this.errorMessage = res.message || '密码修改失败，请重试';
						}
					} catch (err) {
						uni.hideLoading();
						this.errorMessage = '系统错误，请稍后再试';
						console.error('修改密码失败', err);
					}
				})();
			},
			
			// 跳转到忘记密码页面
			goToForgetPassword() {
				uni.navigateTo({
					url: '/packageLogin/login/forget-password'
				});
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding: 30rpx;
	}
	
	.form-container {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.form-group {
		margin-bottom: 30rpx;
	}
	
	.form-label {
		font-size: 30rpx;
		color: #333333;
		margin-bottom: 15rpx;
	}
	
	.form-input {
		height: 90rpx;
		border: 1rpx solid #EEEEEE;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333333;
		background-color: #F9F9F9;
	}
	
	.form-tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
	}
	
	.form-error {
		color: #FF3B30;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}
	
	.submit-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background-color: #1BAE76;
		color: #FFFFFF;
		font-size: 32rpx;
		border-radius: 45rpx;
		margin-top: 40rpx;
	}
	
	.forget-password-link {
		font-size: 28rpx;
		color: #1BAE76;
		text-align: center;
		margin-top: 20rpx;
	}
</style> 